<style type="text/css">
.photos {
overflow: hidden;
border: 10px solid #f0f0f0;
padding: 4px 4px 4px 4px;
width: 950px;
margin: 0 auto;}
img { border: none;}

.photos div img {
padding: 2px 0;
margin: 2px 0;
float: left;
border-bottom: 1px solid #ddd;}
.photos ul.thumbs {
margin: 0;
padding: 0 0 0 0px;
list-style: none;
width: 950px;
float: left;}
.photos ul.thumbs li{
width: 50px;
height: 30px;
margin: 0 3px 0 0;
padding: 0;
float: left;
overflow: hidden;
position: relative;
border: 2px solid #ddd;
text-align: center;}
.photos ul.thumbs li:hover {
border: 2px solid #888;
-moz-opacity:.75; 
filter:alpha(opacity=75); 
opacity:.75; }
.photos ul.thumbs li img {
position: absolute;
top: -1px;
left: -1px;}
</style>

<div class="photos">
<?php $i=0 ; $num = 0; ?>
<!--{foreach($pic_data as $_key => $_value )}-->
<!--{if($_value.status)}-->
<?php $i++; $num++ ; ?>

<div id="photo_{$i}" <?php if($i!=1) { ?> style="display:none;"<?php } ?> ><a href="{$_value.images_link}" target="{$_value.images_target}"><img src="{$_value.images_url|picdir}"  width="950px" height="120px"  alt="{$_value.images_alt}" /></a></div>

<!--{/if}-->
<!--{/foreach}-->


<ul class="thumbs">
<?php $i=0 ; ?>
<!--{foreach($pic_data as $_key => $_value )}-->
<!--{if($_value.status)}-->
<?php $i++ ; ?>
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_{$i}', {$num});"><img src="{$_value.images_url|picdir}"  alt="{$_value.images_alt}"  width="50px" height="30px"  /></a></li>
<!--{/if}-->     
<!--{/foreach}-->

</ul>
</div>

<script language="javascript" type="text/javascript">
function switch_product_img(divName, totalImgs) {
for (var i=1; i<=totalImgs; i++) {
var showDivName = 'photo_' + i;
var showObj = document.getElementById(showDivName);
if (showDivName == divName)
{
showObj.style.display = 'block';
}
else
{
showObj.style.display = 'none';
}
}}
</script>